{% extends "trees/base.html" %}
{% block title %}Nurseries - JM3{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">Nursery Intelligence</h2>
  <a href="{% url 'nursery_create' %}" class="btn btn-jm3">+ Register Nursery</a>
</div>
<p class="text-muted">Which nurseries actually produce seedlings that survive?</p>

<div class="row g-3">
  {% for n in nurseries %}
  <div class="col-md-6 col-lg-4">
    <div class="card shadow-sm h-100">
      {% if n.photo %}<img src="{{ n.photo.url }}" class="card-img-top" style="height:140px;object-fit:cover" alt="">{% endif %}
      <div class="card-body">
        <h5 class="card-title mb-1">{{ n.display_name }}</h5>
        <p class="text-muted small mb-2">{{ n.owner_name }}{% if n.county %} &middot; {{ n.county }}{% endif %}</p>
        <div class="d-flex justify-content-between">
          <span>Seedlings: <strong>{{ n.seedling_capacity }}</strong></span>
          <span>Sourced: <strong>{{ n.sourced_trees }}</strong></span>
        </div>
        <div class="mt-2">
          Verified survival:
          {% if n.verified_survival_rate is not None %}
            <strong class="{% if n.verified_survival_rate >= 70 %}health-alive{% elif n.verified_survival_rate >= 40 %}health-stressed{% else %}health-dead{% endif %}">{{ n.verified_survival_rate }}%</strong>
          {% else %}<span class="text-muted">no data yet</span>{% endif %}
        </div>
      </div>
    </div>
  </div>
  {% empty %}
  <p class="text-muted">No nurseries registered yet.</p>
  {% endfor %}
</div>
{% endblock %}